<template>
    <div id="left-top-bar" style="width: 100%; height: 400px"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, onUnmounted, reactive, toRefs } from 'vue'

import echarts from '@/echarts'

import { option } from './constant'
import { result } from '../../constant'
export default defineComponent({
    name: 'LeftTopBar',
    setup() {
        const constant = {
            option,
            myChart: null as any,
            timer: '' as any
        }
        onMounted(() => {
            let fullData = [] as any
            fullData = result?.map((item: any) => {
                return {
                    name: item.countyName,
                    value: +item.totalSales
                }
            }) as any
            constant.option.series.forEach((item: any) => {
                item.data = fullData
            })
            constant.option.yAxis[1] = fullData.map((item: any) => item.value) //数据赋值

            constant.myChart = echarts.init(document.getElementById('left-top-bar'))
            constant.myChart.setOption(constant.option)
            constant.timer = setInterval(() => {
                if (option.dataZoom[0].endValue >= 9) {
                    option.dataZoom[0].endValue = 5
                    option.dataZoom[0].startValue = 0
                } else {
                    option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
                    option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
                }
                constant.myChart.setOption(option)
            }, 2500)
        })
        onUnmounted(() => {
            clearInterval(constant.timer)
        })

        return {
            ...constant
        }
    }
})
</script>
